<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 百度Web Uploader</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="css/demo/webuploader-demo.min.css">
    <link rel="stylesheet" type="text/css" href="css/demo/webuploader-list.css">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeIn">
       
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>批量 Uploader</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_file_upload.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <!-- <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_file_upload.html#">选项1</a>
                                </li>
                                <li><a href="form_file_upload.html#">选项2</a>
                                </li>
                            </ul> -->
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="page-container">
                             <p>多图展示</p>
                            <div id="list" class="wu-example">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <ul class="filelist1">
                                        <{foreach item = res from = $list}>
                                            <li id="WU_FILE_00">
                                                <p class="title"><{$res.img}></p>
                                                <p class="imgWrap">
                                                    <img width="110" height="110" src="<{$_c.path}>/album/<{$res.img}>">
                                                </p>
                                                <!-- <p class="progress"><span></span></p> -->
                                                <div class="file-panels" style="height: 30px;" img_id="<{$res.id}>"><span class="cancel">删除</span><span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span></div>
                                            </li>
                                        <{/foreach}>
                                        </ul> 
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="page-container">
                            <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮.</p>
                            <div id="uploader" class="wu-example">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <ul class="filelist">
                                        <!-- <li id="WU_FILE_0" class="state-complete"><p class="title">86d6277f9e2f07080341f54cea24b899a901f232.jpg</p><p class="imgWrap"><img src="../upload/album/844499d6gw1f19cp5i5g5j20c70b6t8x.jpg"></p><p class="progress"><span style="display: none; width: 0px;"></span></p><span class="success"></span></li>
                                        --></ul> 
                                        <div id="filePicker"></div>
                                        <p>或将照片拖到这里，单次最多可选300张</p>
                                    </div>
                                </div>
                                <div class="statusBar" style="display:none;">
                                    <div class="progress">
                                        <span class="text">0%</span>
                                        <span class="percentage"></span>
                                    </div>
                                    <div class="info"></div>
                                    <div class="btns">
                                        <div id="filePicker2"></div>
                                        <div class="uploadBtn">开始上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript">
        var BASE_URL = 'js/plugins/webuploader';
    </script>
    <script src="js/plugins/webuploader/webuploader.min.js"></script>
    <script src="js/uploadimgs.js"></script>
    <!--<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>-->

    <script type="text/javascript">
    $(function(){
        $(document).on( 'click', '.file-panels span', function() {
            var index = $(this).index(),
                deg,
                url = 'ajax.php?action=sort';
            var panel = $(this).parent();
            var img_id = panel.attr("img_id");
            switch ( index ) {
                case 0:
                    {   
                        $.post(
                            'ajax.php?action=albumDel',
                            {img_id:img_id},
                            function(data){
                                if(data == '1'){
                                    panel.parent().remove();
                                }
                            }
                            )
                    }
                    return;

                case 1:
                    {  
                        //向右移动排序
                        sort(panel, img_id, 'up', url);
                    }
                    break;

                case 2:
                    {
                         //向左移动排序
                        sort(panel, img_id, 'down', url);
                    }
                    break;
            }
        });
    })
    
    //排序
function sort(obj,id,type,url){
    $.post(
        url,
        {id:id,type:type},
        function(data){
            var li = obj.parent();
            var liHtml = '<li>'+li.html()+'</li>';
            if(type=="down"){
                var prev = li.prev();
                if(prev != undefined){
                    prev.before(liHtml);
                }
                if(data!='')li.remove();
            }else if(type=="up"){
                var next = li.next();
                if(next != undefined){
                    next.after(liHtml);
                }
                if(data!='')li.remove();
            }
        }
    )
}
    
    </script>

</body>


</html>
